<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>多个DIV淡入淡出</title>
   <style>
   div{
    width:200px;height:200px;margin:20px;float:left;background:red;filter:alpha(opacity:30);opacity:0.3;
   }
   </style>
   <script>
       window.onload=function(){
	       var aDiv=document.getElementsByTagName("div");
		   for(var i=0;i<aDiv.length;i++){
		       aDiv[i].alpha=30;
		       aDiv[i].onmouseover=function(){
			     startMove(this,100);    
			   };
			   aDiv[i].onmouseout=function(){
			      startMove(this,30);
			   }
		   }
	   };
      // var alpha=30;
	   
	   function startMove(obj,iTarget){
	     clearInterval(obj.timer);
		 obj.timer=setInterval(function(){
		    var speed=(iTarget-obj.alpha)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(iTarget==alpha){
			   clearInterval(obj.timer);
			}else{
			   alpha+=speed;
			   obj.style.filter="alpha(opacity:"+alpha+")";
			   obj.style.opacity=alpha/100;
			}
		 },30);
		 
		 
	   }
	   
	   
	   
   
   </script>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div> 
   <div></div>
   <div></div>
</body>
</html>